<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--树结构-->
      <el-col :span="4" :xs="24">
        <!-- <div class="app-container-tree-border"> -->
        <el-menu class="el-menu-vertical-demo" @select="handleOpen" background-color="#8897a8" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item v-for="(item, index) in syTypeList" :key="index" :index="item">
            <span slot="title">{{ item }}</span>
          </el-menu-item>
        </el-menu>
        <!-- </div> -->
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="app-container-table-border">
          <el-row :gutter="10" class="mb5 top-right-btn small-line-height">
            <el-popover v-if="Array.isArray(titleList)" placement="bottom-start" width="300" trigger="click" v-model="showPopover" popper-class="report-popper-campus">
              <div class="cd-p8">
                <el-tree :data="titleList" :props="defaultProps" :expand-on-click-node="false" highlight-current>
                  <div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label">
                    {{ node.label }}
                    <el-tag
                      :type="data.showTitle ? '' : 'info'"
                      size="mini"
                      class="text-mini pointer"
                      @click="
                        () => {
                          data.showTitle = !data.showTitle;
                        }
                      "
                    >
                      {{ data.showTitle ? "显示" : "未显示" }}
                    </el-tag>
                  </div>
                </el-tree>
              </div>
              <el-button slot="reference" size="mini" class="cd-mr16">列筛选 <i class="el-icon-arrow-down"></i></el-button>
            </el-popover>
          </el-row>

          <template v-if="hasTitle">
            <el-table v-if="Array.isArray(titleList)" class="report-table" border stripe v-loading="loading" :data="dataList">
              <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
              <el-table-column
                v-if="item.showTitle"
                v-for="(item, index) in titleList"
                :key="'first' + index"
                :label="item.label"
                align="center"
                :min-width="item.width || '120'"
                show-overflow-tooltip
              >
                <template slot-scope="scope">{{ getTableValue(scope.row, item.value) }}</template>
                <el-table-column
                  v-if="sItem && sItem.showTitle"
                  v-for="(sItem, sIndex) in item.children"
                  :key="'second' + sIndex"
                  :label="sItem.label"
                  align="center"
                  :min-width="sItem.width || '120'"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ getTableValue(scope.row, sItem.value) }}
                  </template>
                  <el-table-column
                    v-if="tItem.showTitle"
                    v-for="(tItem, tIndex) in sItem.children"
                    :key="'third' + tIndex"
                    :label="tItem.label"
                    align="center"
                    :min-width="tItem.width || '70'"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">{{ getTableValue(scope.row, tItem.value) }} </template>
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div v-else class="placeholder">
              <el-empty description="正在开发中..." class="cd-mt32"></el-empty>
            </div>
          </template>
          <!-- <el-table border stripe v-loading="loading" :data="dataList">
            <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
            <el-table-column label="工程部位" align="center" prop="gongcbwyt" show-overflow-tooltip />
            <el-table-column label="桩号" header-align="center" align="center" prop="zhuangh" show-overflow-tooltip />
            <el-table-column label="结构物名称" header-align="center" align="center" prop="jiegwmc" show-overflow-tooltip />
            <el-table-column label="层位" header-align="center" align="center" prop="cengw" show-overflow-tooltip />
            <el-table-column label="压实度要求值" header-align="center" align="center" prop="shejysd" show-overflow-tooltip />
            <el-table-column label="测点位置" header-align="center" align="center" prop="cedwzStr" show-overflow-tooltip />
            <el-table-column label="实测值" header-align="center" align="center" prop="shiczStr" show-overflow-tooltip />
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { tstjGcbwList, tstjList } from "@/api/statistics/ysdtjOrBhchd.js";

export default {
  components: {},
  name: "ysdtj",
  data() {
    return {
      // 试验类型列表
      syTypeList: [],
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        syType: undefined,
        deptId: ""
      },
      total: 0,
      dataList: [],
      gongcbwyt: "",
      syTypeId: 131,
      titleList: [
        {
          label: "工程部位",
          value: "gongcbwyt",
          width: "",
          showTitle: true,
          children: []
        },
        {
          label: "桩号",
          value: "zhuangh",
          width: "",
          showTitle: true,
          children: []
        },
        {
          label: "结构物名称",
          value: "jiegwmc",
          width: "",
          showTitle: true,
          children: []
        },
        {
          label: "层位",
          value: "cengw",
          width: "",
          showTitle: true,
          children: []
        },
        {
          label: "压实度要求值",
          value: "shejysd",
          width: "",
          showTitle: true,
          children: []
        },
        {
          label: "测点位置",
          value: "cedwzStr",
          width: "",
          showTitle: true,
          children: []
        },
        {
          label: "实测值",
          value: "shiczStr",
          width: "",
          showTitle: true,
          children: []
        }
      ],
      hasTitle: true,
      showPopover: false,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["deptId"])
  },
  watch: {
    deptId(newValue, oldValue) {
      this.queryParams.deptId = newValue;
      if (this.queryParams.syType) {
        this.getList();
      }
    }
  },
  created() {
    this.queryParams.deptId = this.$store.state.dept.deptId;
    this.getSyTypeTreeList();
  },
  methods: {
    getTableValue (row, type) {
      // 分隔符
      let arr = type.split(".");
      let value = null;
      arr.forEach(item => {
        if (value) {
          value = value[item];
        } else {
          value = row[item];
        }
      });
      return value;
    },
    /** 查询试验类型树 */
    getSyTypeTreeList() {
      let param = {
        syTypeId: this.syTypeId,
        deptId: this.queryParams.deptId
      };
      tstjGcbwList(param).then((response) => {
        this.syTypeList = response.data;
      });
    },
    handleOpen(key, keyPath) {
      this.gongcbwyt = key;
      this.getList();
    },

    /** 查询数据报告列表 */
    getList() {
      this.loading = true;

      this.hasTitle = false;
      this.showPopover = false;
      tstjList({
        gongcbwyt: this.gongcbwyt,
        syTypeId: this.syTypeId,
        deptId: this.queryParams.deptId
      }).then((response) => {
        console.log(response);
        this.dataList = response.data;
        // this.total = response.total;
        this.hasTitle = true;
        this.loading = false;
        // this.$forceUpdate();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
